<app-inner-header name="Modules" [loadCounter]="loadCounter"></app-inner-header>
 <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
  <mat-tab label="List">
    <mat-card>
      <mat-card-content>
        <article>
          <div class="sections" *ngFor="let module of list | keyvalue; trackBy: trackByFn;">
            <div class="section" *ngIf="isModuleConf(module.value)">
              <section class="mat-subheading-1">
                <button mat-raised-button color="basic" class="but-spacer-left name-button"
                        [routerLink]="['/configuration/' + escapeModuleName(module.key)]"
                >
                  {{module.key}}
                </button>
              </section>
              <section>
                <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                        [disabled]="!module.value || !module.value.id || !module.value.loaded"
                        (click)="reloadModule(module.value.id)">
                  Reload
                </button>
              </section>
              <section *ngIf="module.value && module.value.loaded">
                <button mat-raised-button color="warn" class="but-spacer-left switch-button"
                        [disabled]="!module.value || !module.value.id || module.value.unloadable"
                        (click)="unloadModule(module.value.id)">
                  Unload
                </button>
              </section>
              <section *ngIf="!module.value || !module.value.loaded">
                <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                        [disabled]="!module.value || !module.value.id || module.value.unloadable"
                        (click)="loadModule(module.value.id)">
                  Load
                </button>
              </section>
              <section *ngIf="!module.value || !module.value.id">
                <button mat-raised-button color="primary" class="but-spacer-left switch-button" disabled>Enable</button>
              </section>
              <section *ngIf="module.value && module.value.id && !module.value.enabled">
                <button mat-raised-button color="primary" class="but-spacer-left switch-button"
                        (click)="switchModule(module.value.id, module.value.enabled)">
                  Enable
                </button>
              </section>
              <section *ngIf="module.value && module.value.id && module.value.enabled">
                <button mat-raised-button color="accent" class="but-spacer-left switch-button"
                        (click)="switchModule(module.value.id, module.value.enabled)">
                  Disable
                </button>
              </section>
              <section>
                <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                        [disabled]="module.value && module.value.id" (click)="createConfigModule(module.key)">
                  From scratch
                </button>
                or
                <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                        [disabled]="module.value && module.value.id" (click)="importConfigModule(module.key)">
                  Import from FS
                </button>
              </section>
              <section>
                <button *ngIf="autoload['mod_'+module.key] && autoload['mod_'+module.key].enabled"
                        mat-raised-button color="primary" class="but-spacer-left switch-button"
                        (click)="autoLoadModule(module.value.id)"
                        [disabled]="!(module.value && module.value.id)"
                >
                  Autoload
                </button>
                <button *ngIf="!autoload['mod_'+module.key] || !autoload['mod_'+module.key].enabled"
                        mat-raised-button color="basic" class="but-spacer-left switch-button"
                        (click)="autoLoadModule(module.value.id)"
                        [disabled]="!(module.value && module.value.id)"
                >
                  Autoload
                </button>
              </section>
            </div>
          </div>
          <div class="total">
            <button mat-raised-button color="primary" class="but-spacer-left switch-button"
                    (click)="importConfigAllModules()">
              Import All Possible Modules Configs From FS
            </button>
          </div>
        </article>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Import from XML">
    <mat-card>
      <mat-card-content>
        <button mat-raised-button color="basic" class="but-spacer-left switch-button"
                [disabled]="!XMLBody"
                (click)="ImportXMLModuleConfig()"
        >
          Import
        </button>
        <mat-expansion-panel (opened)="initEditor()">
          <mat-expansion-panel-header>
            <mat-panel-title>
              XML editor
            </mat-panel-title>
            <mat-panel-description>
              Click to get details
            </mat-panel-description>
          </mat-expansion-panel-header>
          <app-code-editor [(content)]="XMLBody" *ngIf="editorInited"></app-code-editor>
        </mat-expansion-panel>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Truncate">
    <mat-card>
      <mat-card-content>
        <article>
          <div class="sections" *ngFor="let module of list | keyvalue; trackBy: trackByFn;">
            <div class="section" *ngIf="isModuleConf(module.value)">
              <section class="mat-subheading-1">
                {{module.key}}
              </section>
              <section>
                <button mat-raised-button color="warn" class="but-spacer-left switch-button"
                        [disabled]="!module.value || !module.value.id"
                        (click)="openBottomSheetModule(module.value.id, module.key, 'delete')">
                  Truncate
                </button>
              </section>
            </div>
          </div>
        </article>
      </mat-card-content>
    </mat-card>
  </mat-tab>
</mat-tab-group>
